<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" class="operateView" style="border-bottom: 1px solid #ddd;padding-bottom: 4px;">
                <div style="font-weight: bold;">课程名称：{{ course.name }}</div>
            </el-col>
            <el-col :span="24" class="operateView">
                <el-form :inline="true" style="margin:10px 0;">
                    <el-button @click="operateAction('back', {})" type="info" plain size="small">返回</el-button>
                    <el-button @click="operateAction('create', {})" type="primary" plain size='small'>新增</el-button>
                    <el-button @click="operateAction('delete', {})" type="info" plain size='small'>删除</el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" :inline="true">
                <el-table :data="dataList" size='medium' row-key="id" ref="multipleTable"
                    @selection-change="handleSelectionChange" border
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="章节名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="title" label="标题" show-overflow-tooltip width="240"></el-table-column>
                    <el-table-column prop="sort" label="顺序" show-overflow-tooltip width="100"></el-table-column>
                    <el-table-column prop="redact" label="操作" fixed="right" width="120">
                        <template slot-scope="{ row, index }">
                            <el-button type="text" @click="operateAction('create', row)" size='medium'>新增</el-button>
                            <el-button type="text" @click="operateAction('update', row)" size='medium'>修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <updateDialog ref="updateDialog" @confirm='getDataList'></updateDialog>
    </div>
</template>

<script>
import { formData } from './data'
import updateDialog from './updateDialog'
export default {
    components: { updateDialog },
    data() {
        return {
            dataList: [],
            multipleSelection: [],
            formData,
            course: {},
        }
    },
    created() {
        this.course = this.$route.query.row
        this.getDataList()
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        operateAction(scene, row) {
            switch (scene) {
                case 'create':
                    this.$refs.updateDialog.show({courseId: this.course.id, row: { parent: row.id, parentName: (row.name || row.title)?(row.name + ' ' + row.title):'无' }, formData: this.formData })
                    break;
                case 'update':
                    this.$refs.updateDialog.show({courseId: this.course.id, row: row, formData: this.formData })
                    break;
                case 'back':
                    this.$router.push({name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams}})
                    break;
                case 'delete':
                    if (this.multipleSelection.length <= 0) {
                        this.$message({
                            message: '请选择操作行',
                            type: 'info'
                        })
                    } else {
                        var rowIds = this.multipleSelection.map(function (item) {
                            return item.id
                        })
                        var _this = this
                        this.$confirm('是否确认删除选中的' + rowIds.length + '条记录?', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(function () {
                            return _this.request_post(_this.formData.deleteUrl, {
                                obj_ids: rowIds
                            }).then(res => {
                                if (res.data.code == 10000) {
                                    _this.getDataList()
                                    _this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    })
                                }
                            })
                        })
                    }
                    break;
                default:
                    break;
            }
        },
        getDataList() {

            this.request_post('/education/section/getSectionTree/', {courseId: this.course.id}).then(res => {
                if (res.data.code == 10000) {
                    this.dataList = res.data.data
                }
            });
        }

    }
}
</script>

<style lang="scss" scoped>
.operateView {
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>